<template>
	<view>
		<uni-transition class="soupage" :duration="duration" :mode-class="['fade','zoom-in']" :styles="styles" :show="start" @change="change" >
			
			
			<div class="divsou" :style="{width:widthsou+'px',height:heightsou+'px'}">
				<!-- #ifndef APP-PLUS -->
				<u-top-tips :z-index="3" :navbar-height="(statusBarHeight+50)+'px'" ref="uTips"></u-top-tips>
				<div class="index_toptop3" :style="{'padding-top':(statusBarHeight)+'px',height:(statusBarHeight+50)+'px'}">
					<div class="sou" :style="{'top':(statusBarHeight)+'px'}">
						<div class="sou_img uni-sl1" @tap="sou_fan">{{icons.xiaoyuhao}}</div>
						<div  class="sou_sou" :style="{width:(widthsou-158)+'px'}">
							<div @tap="sou_fun" class="sou_sou_one">搜索</div>
							<div class="sou_sou_two">
								<input v-if="!scrolltrue" @confirm="sou_fun"  @input="souinput" @blur="soublur"  type="text" confirm-type="search" class="sou_input" v-model="souvalue" @focus="focus_input" :auto-focus="start" :focus="start" placeholder-class="input_p" placeholder="商品名称"/>
								<scroll-view @tap="sou_close" v-else scroll-x="true" class="sou_input">
								<div class="souvalueclass">
									<div class="souvalueclassbox">
										<div class="svl_name">{{souvalue}}</div>
										<div @tap="sou_input" class="svl_close">{{icons.guangbi}}</div>
									</div>
								</div>
								</scroll-view>
								<view class="gun"></view>
							</div>
							<div @tap="sou_fun" class="sou_sou_three">&#xe61f;</div>
						</div>
					</div>  
				</div> 
				
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<u-top-tips :z-index="3" :navbar-height="'160rpx'" ref="uTips"></u-top-tips>
				<div class="index_toptop" >
					<div class="sou" :style="{width:((widthsou-20))+'px'}">
						<div @tap="sou_fan" class="sou_fan"  v-html="icons.xiaoyuhao">
						</div>
						<div  class="sou_sou"> 
						<div @tap="sou_fun" class="sou_input_left" >{{icons.sousuo}}</div>
						<input  @confirm="sou_fun"  type="text" confirm-type="search" class="sou_input" @input="souinput" @blur="soublur" v-model="souvalue"  @focus="focus_input" :auto-focus="starts" :focus="starts" placeholder-class="input_p" placeholder="搜索店内商品"/>
						<!-- <scroll-view @tap="sou_close" v-else scroll-x="true" class="sou_input">
						<div class="souvalueclass">
							<div class="souvalueclassbox">
								<div class="svl_name">{{souvalue}}</div>
								<div @tap="sou_input" class="svl_close">{{icons.guangbi}}</div>
							</div>
						</div>
						</scroll-view> -->
						</div>
						<div @tap="sou_fun(true)" class="sou_name" >{{scrolltrue?'取消':'搜索'}}</div>
					</div>
				
				</div>
				<!-- #endif -->
			
				<!-- 店铺信息 -->
				<div class="topbox" >
					<div class="topboxleft">
						<div class="tbltop">
							<div class="img">
								<u-image width="80rpx" height="80rpx" :src="cnds+'/upload/store/logo/'+storedata.logo" shape="circle"></u-image>
							</div>
							<div class="name">{{storedata.name}}</div>
						</div>
						<div class="tblbot">
							<div class="ptname">聚优先</div>
							<div class="fans">粉丝数({{storedata.number}})</div>
						</div>
					</div>
					<div class="topboxright">
						<div @tap="focus" class="guanzhu">{{storedata.focus=='false'?'关注':'已关注'}}</div>
					</div>
				</div>
				<!-- 店铺信息结束 -->
				<!-- #ifndef  APP-PLUS -->
				<div class="soudata" :style="{'padding-top':(statusBarHeight+50)+'px',height:(heightsou)+'px'}">
				<!-- #endif -->	
				<!-- #ifdef  APP-PLUS -->
				<div class="soudata">
				<!-- #endif -->	
					<!-- <scroll-view v-if="!scrolltrue" scroll-y="true" style="width: 100%;height: 100%;"> -->
					<!-- 获取焦点有内容时显示 -->
					<!-- <div v-if="souget" class="gosou" :style="{'min-height':(heightsou-(statusBarHeight+50))+'px'}">
					<u-cell-group >
						<u-cell-item v-for="(valuekeys,index) in keysdata" @click="chagneclick(valuekeys)" :key="index" :index="index" :title="valuekeys" :arrow="false"></u-cell-item>
					</u-cell-group>
					</div> -->
					<!-- 没有获取焦点（或获取焦点）没内容时显示 -->
					<!-- <div v-else class="soudef">
						<div class="history" v-if="historydata!=''">
							<view class="history_title">
								<div class="ht_left">搜索历史</div>
								<div class="ht_right" @tap="remover_historyfun">{{icons.shanchu}}</div>
							</view>
							<view class="history_value">
								<div @tap="gosou_fun(valuehistory)" class="hv_box" v-for="(valuehistory,index) in historydata"  :key="index">{{valuehistory}}</div>
							</view>
						</div>
						
						<div class="history">
							<view class="history_title">
								<div class="ht_left">搜索发现</div>
								<div class="ht_right">换一换</div>
							</view>
							<view class="history_value">
								<div class="hv_box" @tap="gosou_fun(valuefa)" v-for="(valuefa,index) in fadata" :key="index">{{valuefa}}</div>
							</view>
						</div>
					</div> -->
					<!-- </scroll-view> -->
					<div  class="sou_ban" >
							<u-dropdown  class="u-dropdown" :idnumber="xuanz" @change="change_dropdown">
										<u-dropdown-item :selecolor="icons.color" :iconname="'arrow-down'"  v-model="value1" :title="title_one" :options="options1" @change="change_oneitem"></u-dropdown-item>
										<u-dropdown-item :disabled="true" :selecolor="icons.color"  title="销量"></u-dropdown-item>
										<u-dropdown-item :selecolor="icons.color" :iconname="'arrow-down'"  v-model="value3" :title="title_three" :options="options3" @change="change_threeitem"></u-dropdown-item>
										<!-- <u-dropdown-item :disabled="true"   title="筛选" @tap="shai_fun" :iconname="'list-dot'"></u-dropdown-item> -->
							</u-dropdown>
							<u-popup v-model="shaixuan" width="650rpx" mode="right" >
								<scroll-view scroll-y="true" class="shaiclass" :style="{height:(heightsou)+'px'}">
									<div  :style="{height:(statusBarHeight)+'px'}"></div>
									<div class="title">价格</div>
									<div class="jmoney">
										<div class="moneyname">价格范围(元)</div>
										<div class="moneystart">
											<input class="moneyinput" v-model="moneymin" type="number"  placeholder="最低价"/>
										</div>
										<div class="moneycenter">-</div>
										<div class="moneyend">
											<input class="moneyinput" v-model="moneybig" type="number"  placeholder="最高价"/>
										</div>
									</div>
									<div class="pingpai">
										<u-collapse hover-class="none">
											<u-collapse-item :defheight="item.height" :title-style="{'color':'#666'}" :title="item.head" v-for="(item, index) in itemList" :key="index">
												<div class="pingpaivalue" >
													<div @tap="itemList_fun(indexs)" :class="[{'pingpai_list':indexs!=item.id},{'pingpai_list2':indexs==item.id}]" v-for="(items, indexs) in item.body" :key="indexs">
														<u-image  :src="items.img" mode="aspectFill" width="100%" height="100%"></u-image>
													</div>
												</div>
											</u-collapse-item>
										</u-collapse>
									</div>
									<!-- <div class="title">类别</div> -->
									
								</scroll-view>
								<div class="submitbox">
										<div class="sbox_left" @tap="shai_chong">重置</div>
										<div class="sbox_right" @tap="shai_go">确认筛选</div>
								</div>
							</u-popup>
					</div>
					<!-- #ifndef APP-PLUS -->
					<div v-if="scrolltrue" class="sou_scroll" :style="{'height':(heightsou-40-(statusBarHeight+50))+'px'}">
						<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<div class="sou_scroll" >
						<!-- #endif -->
						<scroll-view  scroll-y="true" style="width: 100%;height: 100%;" :lower-threshold="100" @scrolltolower="scrollbottomfun">
							<div style="width: 100%;" v-if="title_three=='单排'">
								<div class="dangwarp" @tap="a_nav('../../pagesA/product/product?id='+prodata_value.proid)" v-for="(prodata_value,ad_index) in list" :key="ad_index">
									<div class="boxleft">
										<u-lazy-load height="250" img-mode="aspectFill" :image="prodata_value.image" :index="ad_index"></u-lazy-load>
									</div>
									<div class="boxright">
										<div class="listname uni-sl2">{{prodata_value.title}}</div>
										<div class="listbiao uni-sl3">{{prodata_value.shop}}</div>
										<div class="listmoney"><d style="font-size: 26rpx;">¥</d> {{prodata_value.price}}</div>
										<div class="listxiao">销量 {{prodata_value.xiao}}</div>
									</div>
								</div>
							</div>
							<div style="width: 100%;" v-if="title_three=='双排'">
								<view class="goods_wrap2">
									<div class="goods" @tap="a_nav('../../pagesA/product/product?id='+prodata_value.proid)"  v-for="(prodata_value,ad_index) in list" :key="ad_index">
										<view class="goods_img">
											<u-lazy-load height="220" img-mode="aspectFill" :image="prodata_value.image" :index="ad_index"></u-lazy-load>
										</view>
										<view class="goods_title u-skeleton-rect uni-sl2">
											{{prodata_value.title}}
										</view>
										<view class="goods_subtitle">
											<text class="subtitle_item u-skeleton-rect uni-sl3">{{prodata_value.shop}}</text>
										</view>
										<!-- <view class="goods_label">
											<text class="label_item u-skeleton-rect">闪电送</text>
										</view> -->
										<view class="goods_price">
												<d style="font-size: 26rpx;">¥</d>{{prodata_value.price}}
											<!-- <view class="price_right u-skeleton-rect">
												<text class="fonticon">{{icons.gouwuche}}</text>
											</view> -->
										</view>
										<view class="sellCount">
											销量 {{prodata_value.xiao}}
										</view>
									</div>
								</view>
							</div>
							<div style="width: 100%;" v-if="title_three=='瀑布'">
								<u-waterfall v-model="flowList" ref="uWaterfall">
										<template v-slot:left="{leftList}">
											<view @tap="a_nav('../../pagesA/product/product?id='+item.proid)" class="demo-warter1" v-for="(item, index) in leftList" :key="index">
												<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
												<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
												<view class="demo-title">
													{{item.title}}
												</view>
												<view class="demo-shop uni-sl3">
													{{item.shop}}
												</view>
												<view class="demo-price">
													<d style="font-size: 26rpx;">¥</d> {{item.price}}
												</view>
												<view class="demo-tag">销量 {{item.xiao}}</view>
												
											</view>
										</template>
										<template v-slot:right="{rightList}">
											<view @tap="a_nav('../../pagesA/product/product?id='+item.id)" class="demo-warter2" v-for="(item, index) in rightList" :key="index">
												<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
												<view class="demo-title">
													{{item.title}}
												</view>
												<view class="demo-shop uni-sl3">
													{{item.shop}}
												</view>
												<view class="demo-price">
													<d style="font-size: 26rpx;">¥</d> {{item.price}}
												</view>
												<view class="demo-tag">销量 {{item.xiao}}</view>
												
											</view>
										</template>
									</u-waterfall>
									</div>
									<uni-load-more class="loadmore" :contentText="loadname"  :status="loadStatus"></uni-load-more>
						</scroll-view>
					</div>
				</div>
			</div>
			
			
			  
		</uni-transition>
	</view>
</template>

<script>
		var _southis=null;
		var user=uni.getStorageSync('user');
		var user_key=uni.getStorageSync('user_key');
		var yhpz=uni.getStorageSync('yhpz');
	export default {
	
		data() {
			return {
				storedata:'',
				id:'',
				start:true,
				widthsou:30,
				heightsou:100,
				loadname:{
						contentdown: "上拉显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了"
					},
				shaidata:{
					moneybig:'',
					moneymin:'',
					pingid:-1,
				},
				keysdata:[],
				yuankeysdata:[],
				historydata:[],
				fadata:[],
				moneybig:'',
				moneymin:'',
				itemList: [{
									head: "品牌",
									id:-1,
									body:[{
										img:'http://dingyue.ws.126.net/dJtQ9XybmcpJwD43McFpw80yadDNxHE1ykmyuDs9p9MPL1516068276366.jpeg',
										name:'999',
									},{
										img:'http://p2.ifengimg.com/fck/2019_30/5f9e181a2dfcae2_w189_h161.png',
										name:'一心堂',
									},{
										img:'http://www.rbgzsb.com/upLoad/product/month_1505/201505080914188960.jpg',
										name:'仁和',
									},{
										img:'http://static.ttpp.com/brandlogo_thumb/0-3230013_400_200.jpg',
										name:'江中',
									}],
									open: true,
								}],
				padding_height:0,
				xuanz:0,//大类标号
				xuanoneid:1,//小类标号
				title_one:'综合',
				title_three:'双排',
				shaixuan:false,
				value1:1,
				value3:1,
				options1: [{
										label: '综合',
										value: 1,
									},
									{
										label: '最新',
										value: 2,
														},
									{
										label: '价格升序',
										value: 3,
									},
									{
										label: '价格降序',
										value: 4,
									}
								],
				options3: [{
										label: '双排显示',
										value: 1,
									},
									{
										label: '单排显示',
										value: 2,
									},
									{
										label: '瀑布显示',
										value: 3,
									}
								],
				starts:false,
				duration:500,
				souvalue:'',//搜索内容
				styles:{
					'width':'100%',
					'height':'100%',
					'backgroundColor':'red',
					'margin':'auto',
					
				},
				icon:'',
				icons:'',
				height:'',
				width:'',
				statusBarHeight:0,
				scrolltrue:false,//是否搜索成功状态
				souget:false,//是否获取焦点且有内容状态
				
				
				ye:0,
				number:20,
				loadStatus: 'more',
								flowList: [],
								list: [
									{
										price: 35,
										id:356,
										title: '北国风光，千里冰封，万里雪飘',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
									},
									{
										price: 75,
										id:356,
										title: '望长城内外，惟余莽莽',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
									},
									{
										price: 385,
										id:356,
										title: '大河上下，顿失滔滔',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
									},
									{
										price: 784,
										id:356,
										title: '欲与天公试比高',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
									},
									{
										price: 7891,
										id:356,
										title: '须晴日，看红装素裹，分外妖娆',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
									},
									{
										price: 2341,
										id:356,
										shop: '李白杜甫白居易旗舰店',
										title: '江山如此多娇，引无数英雄竞折腰',
										image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
									},
									{
										price: 661,
										id:356,
										shop: '李白杜甫白居易旗舰店',
										title: '惜秦皇汉武，略输文采',
										image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
									},
									{
										price: 1654,
										id:356,
										title: '唐宗宋祖，稍逊风骚',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
									},
									{
										price: 1678,
										id:356,
										title: '一代天骄，成吉思汗',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
									},
									{
										price: 924,
										id:356,
										title: '只识弯弓射大雕',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
									},
									{
										price: 8243,
										id:356,
										title: '俱往矣，数风流人物，还看今朝',
										shop: '李白杜甫白居易旗舰店',
										image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
									},
								],
								cnds:'',
			}
		},
		created	() {
			_southis=this;
			 const res = uni.getSystemInfoSync();
			 this.widthsou=res.windowWidth;
			 this.heightsou=res.windowHeight;
		},
		onLoad(options) {
			this.id=options.id;
			console.log(this.id);
		},
		mounted(){
			this.cnds=uni.getStorageSync('CND_key');
			uni.getSystemInfo({
				success:(res)=> {
					this.statusBarHeight=parseInt(res.statusBarHeight);
					
					}});
			this.icon=uni.getStorageSync('icon'); 
			this.icons=uni.getStorageSync('icons');
			uni.request({
				url: uni.getStorageSync('APP_key') + '/store_data.php', 
				method: 'POST',
				data: {
					user:user,
					user_key:user_key, 
					yhpz:yhpz,
					id:this.id,
					type:'store',
					
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				dataType: 'json',
				success: (res)=> {
					console.log(res);
					this.storedata=res.data;
				}});
				this.sou_fun(false);
				
		},
		methods: {
			focus:function(){
				uni.request({
					url: uni.getStorageSync('APP_key') + '/store_data.php', 
					method: 'POST',
					data: {
						user:user,
						user_key:user_key, 
						yhpz:yhpz,
						id:this.id,
						type:'focus',
						
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					dataType: 'json',
					success: (res)=> {
						if(res.data.id==3){//关注
							this.storedata.focus='true';
							this.storedata.number++;
						}else if(res.data.id==2){//取消关注
							this.storedata.focus='false';
							this.storedata.number--;
						}else{//未登录
							this.a_nav('../../pagesB/bind/bind');
						}
					}});
			},
			a_nav:function(url){
				uni.navigateTo({
					url:url
				})
			},
			scrollbottomfun:function(){//上啦加载
			if(this.loadStatus=='noMore'){
				return;
			}
				if(this.ye>0){
					
							 if(user=='' || user_key=='' || yhpz=='' || user==undefined || user_key==undefined || yhpz==undefined){
								user="fd2";
								user_key="fd2";
								yhpz="fd2";
							 }
					if(this.xuanz==0 && this.xuanoneid==1){
						var xiao_number=false;
						var new_time=false;
						var money_desc=false;
						var money_asc=false;
						var zong_he=true;
					}else if(this.xuanz==0 && this.xuanoneid==2){
						var xiao_number=false;
						var new_time=true;
						var money_desc=false;
						var money_asc=false;
						var zong_he=false;
					}else if(this.xuanz==0 && this.xuanoneid==3){
						var xiao_number=false;
						var new_time=false;
						var money_desc=false;
						var money_asc=true;
						var zong_he=false;
					}else if(this.xuanz==0 && this.xuanoneid==4){
						var xiao_number=false;
						var new_time=false;
						var money_desc=true;
						var money_asc=false;
						var zong_he=false;
					}else{
						var xiao_number=true;
						var new_time=false;
						var money_desc=false;
						var money_asc=false;
						var zong_he=false;
					}
					try{
						var brand_id=this.itemList[0].body[this.itemList[0].id].id;
					}catch(e){
						var brand_id='';
						
					}
								 this.loadStatus="loading";
								 setTimeout(()=>{
								 			 uni.request({
								 			 			 		url: uni.getStorageSync('APP_key') + '/store_data.php',
								 			 			 		method: 'POST',
								 			 			 		data: {
								 			 			 			user:user,
								 			 			 			user_key:user_key, 
								 			 			 			yhpz:yhpz,
								 									id:this.id,
																	type:'data',
								 									ye:this.ye,//页数
								 									number:this.number,//取多少条
								 									sou_value:this.souvalue,//搜索内容
								 									money_big:this.shaidata.moneybig,//搜索最大价格
								 									money_min:this.shaidata.moneymin,//搜索最小价格
																	brand_id:brand_id,
								 									xiao_number:xiao_number,//销量
								 									new_time:new_time,//最新
								 									money_desc:money_desc,//价格降序
								 									money_asc:money_asc,//价格升序
								 									zong_he:zong_he,//综合
								 									zong_sui:false,//随机
								 			  			
								 			  		},
								 			  		header: {
								 			  			'content-type': 'application/x-www-form-urlencoded'
								 			  		},
								 			  		dataType: 'json',
								 			  	success:(res)=> {
													
								 					this.ye=this.ye+1;
								 					if(res.data.length<this.number){
														this.loadname.contentnomore="没有更多数据了";
								 						this.loadStatus="noMore";
														
								 					}else{
								 						this.loadStatus="more";
								 					}
													res.data.forEach((item,id)=>{
														var obj={
														price: item.pro_money,
														proid:item.pro_id,
														title: item.name_pro,
														shop: item.tip,
														image: this.cnds+'/upload/pro/'+item.img,
														xiao:item.xiao
														}
														this.list.push(obj);
														this.addRandomData(obj,this.list.length-1);
													});
													
								 				},fail() {
										
										this.loadStatus="more";
									}
												});
								 
								 	
								 },500);
				}else{
					
					
				
							 if(user=='' || user_key=='' || yhpz=='' || user==undefined || user_key==undefined || yhpz==undefined){
								user="fd2";
								user_key="fd2";
								yhpz="fd2";
							 }
					if(this.xuanz==0 && this.xuanoneid==1){
						var xiao_number=false;
						var new_time=false;
						var money_desc=false;
						var money_asc=false;
						var zong_he=true;
					}else if(this.xuanz==0 && this.xuanoneid==2){
						var xiao_number=false;
						var new_time=true;
						var money_desc=false;
						var money_asc=false;
						var zong_he=false;
					}else if(this.xuanz==0 && this.xuanoneid==3){
						var xiao_number=false;
						var new_time=false;
						var money_desc=false;
						var money_asc=true;
						var zong_he=false;
					}else if(this.xuanz==0 && this.xuanoneid==4){
						var xiao_number=false;
						var new_time=false;
						var money_desc=true;
						var money_asc=false;
						var zong_he=false;
					}else{
						var xiao_number=true;
						var new_time=false;
						var money_desc=false;
						var money_asc=false;
						var zong_he=false;
					}
					try{
						var brand_id=this.itemList[0].body[this.itemList[0].id].id;
					}catch(e){
						var brand_id='';
						
					}
					
					
					this.loadStatus="loading";
					setTimeout(()=>{
								 uni.request({
								 			 		url: uni.getStorageSync('APP_key') + '/store_data.php',
								 			 		method: 'POST',
								 			 		data: {
								 			 			user:user,
								 			 			user_key:user_key, 
								 			 			yhpz:yhpz,
														id:this.id,
														type:'data',
														ye:this.ye,//页数
														number:this.number,//取多少条
														sou_value:this.souvalue,//搜索内容
														money_big:this.shaidata.moneybig,//搜索最大价格
														money_min:this.shaidata.moneymin,//搜索最小价格
														brand_id:brand_id,
														xiao_number:xiao_number,//销量
														new_time:new_time,//最新
														money_desc:money_desc,//价格降序
														money_asc:money_asc,//价格升序
														zong_he:zong_he,//综合
														zong_sui:false,//随机
								  			
								  		},
								  		header: {
								  			'content-type': 'application/x-www-form-urlencoded'
								  		},
								  		dataType: 'json',
								  	success:(res)=> {
										this.ye=this.ye+1;
										if(res.data.length==0){
											this.loadname.contentnomore="抱歉！没有找到相关内容";
											this.loadStatus="noMore";
										}else if(res.data.length<this.number){
											this.loadname.contentnomore="没有更多数据了";
											this.loadStatus="noMore";
										}else{
											this.loadStatus="more";
										}
										res.data.forEach((item,id)=>{
											if(id==0 && this.itemList[0].body==''){
												item.brand_data.forEach((item,id)=>{
													var obj={
														img:this.cnds+'/upload/pro_type/'+item.img_logo,
														name:item.c_name,
														id:item.id,
														height:(this.itemList[0].body.length/3)>=4?400:(this.itemList[0].body.length/3)>=3?300:(this.itemList[0].body.length/3)>=2?200:(this.itemList[0].body.length/3)>1?200:100,
													}
													this.itemList[0].body.push(obj);
												});
											}
											var obj={
											price: item.pro_money,
											proid:item.pro_id,
											title: item.name_pro,
											shop: item.tip,
											image: this.cnds+'/upload/pro/'+item.img,
											xiao:item.xiao
											}
											this.list.push(obj);
											this.addRandomData(obj,this.list.length-1);
										});
										
									},fail() {
										
										this.loadStatus="more";
									}
									
								});
					
						
					},500);
				}
			},
			shai_go:function(){
				this.shaidata.moneybig=this.moneybig;
				this.shaidata.moneymin=this.moneymin;
				this.shaidata.pingid=this.itemList[0].id;	
				this.shaixuan=false;
				this.sou_fun();
			},
			shai_chong:function(){//筛选重置
				this.shaidata.moneybig='';
				this.shaidata.moneymin='';
				this.shaidata.pingid=-1;
				this.moneybig='';
				this.moneymin='';
				this.itemList[0].id=-1;
				this.sou_fun();
				
			},
			chagneclick:function(val){
				this.souget=false;
				this.itemList[0].body=[]; 
				this.gosou_fun(val);
			},
			soublur:function(){
				//this.souget=false;
				
			},
			souinput:function(e){
				this.scrolltrue=false;
				this.itemList[0].body=[]; 
				if(e.detail.value==''){
					this.souget=false;
				}else{
				this.keysdata=[];
				this.souget=true;
				this.yuankeysdata.forEach((item,id)=>{
					if(item.substr(0,1)==e.detail.value.substr(0,1)){
						this.keysdata.unshift(item);
					}
					if(this.yuankeysdata.length-1==id && this.keysdata==''){
						this.souget=false;
					}
				});	
				}
				
			},
			itemList_fun:function(id){
				if(id==this.itemList[0].id){
					this.itemList[0].id=-1;
				}else{
					this.itemList[0].id=id;
				}
			},
			change_threeitem:function(e){
				if(e==1){
					this.title_three='双排';
				}else if(e==2){
					this.title_three='单排';
				}else{
					this.title_three='瀑布';
				}
			},
			change_oneitem:function(e){
				this.xuanz=0;
				this.xuanoneid=e;
				if(e==1){
					this.title_one='综合';
				}else if(e==2){
					this.title_one='最新';
				}else{
					this.title_one='价格';
				}
				this.sou_fun();
			},
			change_dropdown:function(e){
				console.log(e);
				if(e==3){
					this.shai_fun();
				}else{
					this.xuanz=1;
					this.sou_fun();
				}
			},
			shai_fun:function(){//打开塞选
				this.shaixuan=true;
				this.moneybig=this.shaidata.moneybig;
				this.moneymin=this.shaidata.moneymin;
				this.itemList[0].id=this.shaidata.pingid;
			},
			sou_input:function(){
				this.scrolltrue=false;
				this.souvalue='';
			},
			remover_historyfun:function(){
				this.historydata=[];
				uni.removeStorage({
				    key: 'historydata'
				});
			},
			gosou_fun:function(val){
				 this.souvalue=val;
				 this.itemList[0].body=[]; 
				this.sou_fun();
				
			},
			sou_fun:function(e){
				
				if(this.souvalue=='' && e==true){
					this.$refs.uTips.show({
									title: '请输入商品名称',
									type: 'warning',
									duration: '2300'
								});
								
								return;
				}
				if(e==true){
					
					this.scrolltrue=!this.scrolltrue;
				}
				if(this.scrolltrue==false && e==true){
					
					this.souvalue='';
				}
				if(this.historydata.length==0){
					this.historydata.unshift(this.souvalue);
					setTimeout(()=>{
						uni.setStorage({
					    key: 'historydata',
					    data: this.historydata
					});
					},500);
				}else if(this.historydata.length<=15){
					var len=this.historydata.length-1;
					var arr=[];
					this.historydata.forEach((item,id)=>{
						if(item!=this.souvalue){
							arr.push(item);
						}
						if(len==id){
							arr.unshift(this.souvalue);
							this.historydata=arr;
							setTimeout(()=>{
								uni.setStorage({
							    key: 'historydata',
							    data: arr
							});
							},500);
						}
					});
				}else{
					this.historydata.pop();
				var len=this.historydata.length-1;
				var arr=[];
				this.historydata.forEach((item,id)=>{
					if(item!=this.souvalue){
						arr.push(item);
					}
					if(len==id){
						arr.unshift(this.souvalue);
						this.historydata=arr;
						setTimeout(()=>{
							uni.setStorage({
						    key: 'historydata',
						    data: arr
						});
						},500);
					}
				});
					
				}
				this.ye=0;
				this.loadname.contentnomore="没有更多数据了";
				this.loadStatus="more";
				this.list=[];
				this.flowList=[];
				try{
					this.clear();
				}catch(e){
					//TODO handle the exception
				}
				this.scrollbottomfun();
				            
			},
			sou_close:function(){
				this.scrolltrue=false;
			},
			open() {
					
			 
			  this.start = !this.start
						
			},
			 change() {
				 
				 	try{
				 		uni.getStorage({
				 		    key: 'historydata',
				 		    success:  (res)=>{
				 		       this.historydata=res.data;
				 		    } 
				 		});
				 	}catch(e){
				 		//TODO handle the exception
				 	}
			
		},
		sou_fan:function(){
			uni.navigateBack({
				delta:1,
			})
		
		},
		focus_input:function(e){
			this.shaidata.moneybig='';
			this.shaidata.moneymin='';
			this.shaidata.pingid=-1;
			this.moneybig='';
			this.moneymin='';
			this.itemList[0].id=-1;
		},
		huo_focus:function(){
			this.starts=true;
		},
		huo_focus2:function(){
			this.starts=false;
		},
		addRandomData(item,len) {
							// let index = this.$u.random(0, this.list.length - 1);
							// // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
							// let item = JSON.parse(JSON.stringify(this.list[index]))
							item.id = this.$u.guid();
							this.flowList.push(item);
					},
					remove(id) {
						this.$refs.uWaterfall.remove(id);
					},
					clear() {
						this.$refs.uWaterfall.clear();
					}
									
		}
	}
</script>

<style lang="scss">
.soupage{
	position: fixed;
	left: 0upx;
	top: 0upx;
	z-index: 10000;

.divsou{
	background: $bgcolor-white-0;
	.soudata{
		width: 100%;
		height: calc(100vh - 160upx);
		.sou_ban{
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			.soubanbox{
				height: 80rpx;
				line-height: 80rpx;
			}
		}
		.sou_scroll{
			height: calc(100vh - 420upx);//240
			width: 100%;
			background: $bgcolor-blackq-4;
		}
		.gosou{
			width: 100%;
		}
		.soudef{
			width: 100%;
			.history{
				padding:30upx 3%;
				.history_title{
					padding-bottom:20rpx;
					display: flex;
					justify-content: space-between;
					.ht_left{
						font-size: $color-size-6;
						color:$color-black-0;
						height:50rpx;
						line-height:50rpx;
						
					}
					.ht_right{
						font-size: $color-sizeicon-1;
						color:$color-black-3;
						height:50rpx;
						line-height:50rpx;
						text-align: right;
						font-family: iconfont;
					}
				}
				.history_value{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					.hv_box{
						display: inline-block;
						padding: 10rpx 30rpx;
						margin: 10rpx;
						line-height: 50rpx;
						background: $bgcolor-blackq-4;
						border-radius:20px;
						color:$color-black-2;
					}
				}
			}
		}
	}
	.index_toptop3 {
		width: 100%;
		position: fixed;
		top: 0upx;
		left: 0upx;
		background-color: $bgcolor-white-0;
		z-index: 4;
		border-bottom: 1px solid $bkcolor-white-1;
		.sou {
			position: absolute;
			z-index: 5;
			margin:  auto;
			height: 45px;
			width: 750upx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
	
			.sou_img {
				width: 50px;
				height: 45px;
				line-height: 45px;
				text-align: center;
				font-size: 30px;
				font-family: iconfont;
			}
	
			.sou_sou {
				margin-right: 108px;
				margin-top: 5px;
				height: 35px;
				padding:0px 3px;
				background: $bgcolor-blackq-6;
				border-radius: 100upx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
	
				.sou_sou_one {
					width:80px;
					height: 35px;
					line-height: 35px;
					font-size: 16px;
					color: #888;
					text-align: center;
				}
	
				.sou_sou_two {
					width: 100%;
					padding: 0upx 3%;
					height: 35px;
					line-height: 35px;
					font-size: 16px;
					color: #888;
					position: relative;
					overflow: hidden;
					.sou_input{
						height: 35px;
						flex-direction: row;
						white-space: nowrap;
						.souvalueclass{
							height: 25px;
						    margin: 5px 10rpx;
							display:inline-block;
							background-color: rgba($color: $color-all, $alpha: 0.1);
							border-radius: 25px;
							padding: 0rpx 20rpx 0rpx 20rpx;
							.souvalueclassbox{
								display: flex;
								justify-content: flex-start;
								align-items: center;
							.svl_name{
								height: 25px;
								line-height:25px;
							}
							.svl_close{
								height: 25px;
								width:25px; 
								line-height:25px;
								text-align: right;
								font-size:18px;
								color:$color-black-2;
								font-family: iconfont;
							}
							
								
							}
							
						}
					}
	
					.gun {
						width: 2upx;
						height: 50upx;
						top: 0upx;
						position: absolute;
						left: 0upx;
						bottom: 0upx;
						right: 0upx;
						margin: auto 0upx;
						background: #ececec;
					}
				}
	
				.sou_sou_three {
					width: 80px;
					height: 35px;
					line-height: 35px;
					color: #888;
					font-family: iconfont;
					font-size: 24px;
					text-align: center;
				}
			}
	
			.sou_sao {
				height: 80upx;
				line-height: 80upx;
				text-align: right;
				font-size: 50upx;
				color: #fff;
				font-family: iconfont;
			}
		}
	
		.nav {
			width: 100%;
			height: 80upx;
	
			.nav_scroll {
				width: 100%;
				height: 80upx;
				display: flex;
				flex-wrap: nowrap;
				white-space: nowrap;
	
				.nav_type_list {
					width: 100%;
					height: 80upx;
					position: relative;
	
					.nav_list {
						padding: 0upx 10upx;
						display: inline-block;
						line-height: 80upx;
						text-align: center;
						font-size: 32upx;
					}
	
					.nav_scroll_type_dong {
						position: absolute;
						bottom: 10upx;
						height: 10upx;
						border-radius: 1000upx;
						background: #fff;
						transition: left 0.5s;
						-webkit-transition: left 0.5s;
						/* Safari */
						-moz-transition: left 0.5s;
	
					}
				}
			}
		}
	}
	.index_toptop{
		width:100%;
		height: 160upx;
		position: fixed;
		top:0upx;
		left:0upx;
		z-index: 3;
		background: $bgcolor-white-0;
		border-bottom: 1px solid $bkcolor-white-1;
		.sou{
			height: 80upx;
			margin: 60upx auto 0upx auto;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			
            .sou_fan{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: left;
				color:$color-black-5;
				font-size: $color-sizeicon-14;
				font-family: iconfont;
				font-weight: 600;
				
			}
			.sou_sou{
				width: calc(100% - 180upx);
				height: 80upx;
				line-height: 80upx;
				border-radius: 100upx;
				background: $bgcolor-black-9;
				position: relative;
				.sou_input{
					width:70%;
					height: 100%;
					padding:0upx 15%;
					flex-direction: row;
					white-space: nowrap;
					.souvalueclass{
						height: 60upx;
					    margin: 10upx 20rpx;
						display:inline-block;
						background-color: rgba($color: $color-all, $alpha: 0.1);
						border-radius: 60upx;
						padding: 0rpx 20rpx 0rpx 20rpx;
						.souvalueclassbox{
							display: flex;
							justify-content: flex-start;
							align-items: center;
						.svl_name{
							height: 60upx;
							line-height:60upx;
						}
						.svl_close{
							height: 60upx;
							width:60upx; 
							line-height:60upx;
							text-align: right;
							font-size: $color-size-5;
							color:$color-black-2;
							font-family: iconfont;
						}
						
							
						}
						
					}
					
				}
				.input_p{
					font-size: $color-size-4;
				}
				.sou_input_left{
					width: 80upx;
					height: 80upx;
					line-height: 80upx;
					font-size: $color-sizeicon-7;
					font-family: iconfont;
					position: absolute;
					text-align: center;
					color:$bgcolor-black-5;
					top:0upx;
					left: 0upx;
				}
			}
			.sou_name{
				width: 100upx;
				height:80upx;
				line-height: 80upx;
				color:$color-black-3;
				font-size: $color-size-6;
				text-align: center;
			}
		}
		
	}
	// 店铺信息
	
	.topbox{
		margin-top: 160rpx;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding:10px 20rpx;
		border-bottom: 1px solid $bkcolor-white-1;
		.topboxleft{
			width: 70%;
			.tbltop{
				display: flex;
				justify-content: flex-start;
				align-content: center;
				.img{
					width: 80rpx;
					height: 80rpx;
					margin: 10rpx 25rpx 10rpx 10rpx;
				}
				.name{
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: $color-size-5;
					font-weight: 600;
				}
			}
			.tblbot{
				display: flex;
				justify-content: flex-start;
				align-content: center;
				.ptname{
					height: 40rpx;
					line-height: 40rpx;
					width: 100rpx;
					background-color: red;
					text-align: center;
					font-size: $color-size-0;
					color:$color-white-0;
					border-radius: 40rpx;
					margin-right: 10px;
				}
				.fans{
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: $color-size-2;
				}
			}
		}
		.topboxright{
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.guanzhu{
				width: 120rpx;
				border: 1px solid red;
				text-align: center;
				border-radius: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				color:red;
			}
		}
	}
}

}








// 商品瀑布

.demo-warter1 {
		border-radius: 8px;
		margin-top: 8px;
		margin-left: 8px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
.demo-warter2 {
		border-radius: 8px;
		margin-top: 8px;
		margin-left:8px;
		margin-right:8px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: $color-size-5;
		color:$color-black-0;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
		font-size: $color-size-1;
		color:$color-black-4;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: $color-size-7;
		color:$color-red-0;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: $color-size-2;
		color:$color-all;
		margin-top: 5px;
	}
	.loadmore{
		height: 100rpx;
	}
	
	
	// 商品双排
	.goods_wrap2{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20upx 20upx 0 20upx;
		.goods{
			height: 550upx;
			background-color: $bgcolor-white-0;
			width: 49%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			font-size: 28upx;
			margin-bottom: 10upx;
			box-sizing: border-box;
			padding: 10upx;
			&:nth-child(odd){
				// box-sizing: border-box;
				// margin-right: 1%;
			}
			.goods_img{
				height: 48%;
			}
			.goods_title{
				 overflow: hidden;
				 font-size: $color-size-5;
				 color:$color-black-0;
				 // font-size: 31upx;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 2;  // 控制多行的行数
				    -webkit-box-orient: vertical;
			}
			.goods_subtitle{ 
				font-size: $color-size-2;
				color:$color-all;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.subtitle_item{
					margin-right: 10upx;
				}
			}
			.goods_label{
				color: orange;
				font-size: 23upx;
			}
			.goods_price{
					font-size: $color-size-7;
					color:$color-red-0;
					
			}
			.sellCount{
				font-size: $color-size-1;
				color:$color-black-4;
			}
		}
	}
	
	.dangwarp{
		width: 750upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10upx;
		padding: 10upx 0upx;
		background-color: $bgcolor-white-0;
		.boxleft{
			width: 40%;
		}
		.boxright{
			width: 58%;
			padding:0upx 1%;
			display: flex;
			align-items:center;
			flex-wrap: wrap;
			.listname{
				width:100%;
				line-height: 50upx;
				font-size: $color-size-5;
				color:$color-black-0;
			}
			.listbiao{
				width:100%;
				line-height: 50upx;
				font-size: $color-size-2;
				color:$color-all;
			}
			.listmoney{
				width:100%;
				line-height: 50upx;
				font-size: $color-size-7;
				color:$color-red-0;
			}
			.listxiao{
				width:100%;
				line-height: 50upx;
				font-size: $color-size-1;
				color:$color-black-4;
			}
		}
	}
	
	/* 筛选 */
	.submitbox{
			position: absolute;
			left:0px;
			bottom:0px;
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.sbox_left{
				width: 40%;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				font-size: $color-size-5;
				color: $color-all;
				background-color: rgba($color: $color-all, $alpha: 0.1);
			}
			.sbox_right{
				width: 60%;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				font-size: $color-size-5;
				color: $bgcolor-white-0;
				background-color: rgba($color: $color-all, $alpha: 1);
			}
		}
	.shaiclass{
		padding: 0upx 3%;
		position: relative;
		width: 94%;
		.title{
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			font-size: $color-size-4;
			color:$color-black-3;
		}
		.jmoney{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.moneyname{
				width:300upx;
				line-height:60upx;
				text-align: left;
				font-size: $color-size-3;
				color:$color-black-0;
			}
			.moneystart{
				width:250upx;
				border-radius: 10upx;
				height: 60upx;
				line-height: 60upx;
				background-color: $color-black-9;
				text-align:center;
				.moneyinput{
					width: 90%;
					padding:0upx 5%;
					height: 100%;
				}
			}
			.moneycenter{
				width:60upx;
				line-height:60upx;
				text-align: center;
				font-size: $color-size-4;
				color:$color-black-0;
			}
			.moneyend{
				width:250upx;
				border-radius: 10upx;
				height: 60upx;
				line-height: 60upx;
				background-color: $color-black-9;
				text-align:center;
				.moneyinput{
					width: 90%;
					padding:0upx 5%;
					height: 100%;
				}
			}
		}
		.pingpai{
			width: 100%;
			margin-top: 20upx;
			.pingpaivalue{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.pingpai_list{
					margin:10upx;
					width: 180upx;
					height: 80upx;
					border-radius: 20upx;
					overflow:hidden;
				}
				.pingpai_list2{
					margin:10upx;
					width: 180upx;
					height: 80upx;
					border-radius: 20upx;
					border: 1px solid $color-all;
					overflow:hidden;
				}
			}
		}
		
	}
	
</style>


